<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in list" :key="index">
        <img @click="getImg(item)" :src="item.img" alt="">
        <p>{{item.name}}</p>
      </swiper-slide>
      <div class="swiper-button-prev swiper-button-red" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-blue" slot="button-next"></div>
    </swiper>
    <button @click="prev">上一页</button>
    <div @click="next">下一页</div>
  </div>
</template>
<script>
  import {
    swiper,
    swiperSlide
  } from "vue-awesome-swiper";
  import "swiper/swiper-bundle.css";
  export default {
    data() {
      return {
        list: [],
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          slidesPerGroup: 3,
          loop: true,
          loopFillGroupWithBlank: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    methods: {
      getImg(item) {
        console.log(item, 'iiiii');

      },
      prev() {
        this.swiper.slidePrev();
      },
      next() {
        this.swiper.slideNext()
      }
    },
  }

</script>
<style lang="less">

</style>
